<!DOCTYPE html>
<html>
    <head>
        <title>Dopravní nehody</title>
        <link rel="icon" type="image/png" href="http://dopravniservis.eu/favicon.ico">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- jQuery -->
        <script src="libs/jquery.min.js"></script>
        
        <!-- Twitter bootstrap css file -->
        <link href="libs/bootstrap.css" rel="stylesheet" media="screen">
        
        <!-- google maps -->
        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBd1Gd5Q6Z6m_m_yvCCS38fXRdY-4j71tI&sensor=false"></script>
        
        <!-- xml to json -->
        <script src="libs/xml2json.js"></script>
        
        <!-- our stuff -->
        <link href="css/style.css" rel="stylesheet" media="screen">
        <script src="js/functions.js"></script>
        
        
        <script>
            //global objects
            var events = new Array();         
            
            // map bounds
            var SW_BOUND = new google.maps.LatLng(48.551808, 12.090533);
            var NE_BOUND = new google.maps.LatLng(51.055703, 18.859253);  
            
            // event prototype
            var Event = function(lat, lng, timeBeg, timeEnd, descLong, descShort, position, type) {
                this.lat = lat;
                this.lng = lng;
                this.timeBeg = timeBeg;
                this.timeEnd = timeEnd;
                this.descLong = descLong;
                this.descShort = descShort;
                this.position = position;
                this.type = type;
            };
            
            // loads events from xml file
            var loadEvents = function() {       
                // synchronous request to server to get crashes xml file
                var crashesXmlString = $.ajax({ url: "xml/crashes_nice.xml", async: false }).responseText;
                crashesXmlString = crashesXmlString.replace(/&/g,'&#x26;');
                var crashesJson = JSON.parse(xml2json((new DOMParser()).parseFromString(crashesXmlString, "text/xml"), ""));
                
                var crashes = new Array();
                for (var i = 0; i < crashesJson.events.event.length; ++i) {
                    var e = crashesJson.events.event[i];
                    crashes[i] = new Event(parseFloat(e["@by"]), parseFloat(e["@bx"]), e["@stadatetime"], e["@stodatetime"], 
                        e["@desclong"], e["@descshort"], e["@position"], parseInt(e["@type"]));
                }

                return crashes;
            };
                        
            // map initialize
            var initialize = function() {
                $("#gmap").css("height",($(window).height())-40+"px");
                
                var map = new google.maps.Map(document.getElementById("gmap"), {
                    mapTypeControl:false,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                });
                
                map.fitBounds(new google.maps.LatLngBounds(SW_BOUND, NE_BOUND));
                
                events = loadEvents();
                                
                var infoWindow = new google.maps.InfoWindow();
                                
                // for each event adds marker, infoWindow and marker-click-event listener
                for (var i = 0; i < events.length; ++i)
                {
                    (function () {
                        var icon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; 
                        var typeStr = "Dopravní omezení";
                        if (events[i].type === 201) {
                            icon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
                            typeStr = "Dopravní nehoda";
                        }
                        
                        var marker = new google.maps.Marker({ position:new google.maps.LatLng(events[i].lat, events[i].lng), map:map, icon:icon });
                        var content = "<h3>" + typeStr + "<h3>" +
                                      "<h4>Čas</h4><b>od:</b> "+ events[i].timeBeg.substr(0,16) +
                                      "<br><b>do:</b> " + events[i].timeEnd.substr(0,16) +
                                      "<h4>Popis</h4>"+ events[i].descShort +
                                      "<br/><br/><button onclick='showEvent(" + i + ")'>Detail nehody</button>";
                        
                        google.maps.event.addListener(marker, "click", function() {
				infoWindow.setContent(content);
                                infoWindow.open(map, this); });
                    })();
                }                 
                
		// infoWindow closes after clicking the map
                google.maps.event.addListener(map, 'click', function() { infoWindow.close() });                         
            };

            //init
            google.maps.event.addDomListener(window, "load", initialize);
            
            $(document).ready(function() {
                $("#map_menu,#title").click( function() { 
                    showMap(); 
                });
                $("#stats_menu").click( function() { 
                    show("stats"); 
                });
                $("#text_menu").click( function() { 
                    show("text"); 
                });
                $("#about_menu").click( function() { 
                    show("about"); 
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                  <div class="container">
                    <a class="brand" href="#" onclick="initialize();">Dopravní servis</a>
                    <div class="nav-collapse collapse">
                      <ul class="nav">
                        <li><a href="#" id="map_menu">Mapa</a></li>
                        <li><a href="#" id="text_menu">Seznam nehod</a></li>
                        <li><a href="#" id="stats_menu">Statistiky</a></li>
                        <li><a href="#" id="about_menu">O aplikaci</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
        </div>
        
        <div id="gmap"></div>
        
    </body>
</html>